@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    box-sizing: border-box;
}

@layer base {
    h1 {
        @apply text-6xl;
    }
    h2 {
        @apply text-3xl;
    }
    .rotate-90 {
        --tw-rotate: 90deg;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
}

/* .slog_page_list_item_bg_color {
    @apply bg-slate-100;
}
.slog_page_list_item_bg_color:hover {
    @apply bg-slate-200;
} */
.slog_page_list_item_bg_color[active] {
    @apply bg-yellow-300;
}

.slog-scroll-vertical {
    @apply overflow-x-hidden overflow-y-hidden hover:overflow-y-auto;
}
.slog-scroll-horizontal {
    @apply overflow-x-hidden overflow-y-hidden hover:overflow-x-auto;
}

:root {
    --slog-scroll-width: 3px;
    --widget-icon-size: 16px;
}

.scrollbar::-webkit-scrollbar {
    width: var(--slog-scroll-width);
    height: var(--slog-scroll-width);
}

.scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-500;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-700;
}

.scrollbar::-webkit-scrollbar-track:visible {
    @apply bg-gray-400;
}

.transition-width {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.anim-height {
    @apply transition-height;
}

.page_tag_con button {
    margin-left: 0.3rem;
    border-radius: 0.125rem/* 2px */;
}
.page_tag_con > span {
    align-items: center;
    display: inline-flex;
    user-select: none;
    height: 20px;
    @apply mx-1;
    @apply my-1;
}

#ID_main_content ul{
    @apply text-slate-600 list-disc list-inside;
}

.slog_pane_focus{
    @apply border-slate-500 border-[1px] bg-slate-100;
}

.slog_toc_h1{
    @apply text-xl;
}
.slog_toc_h2{
    @apply text-base;
}
.slog_toc_h3{
    @apply text-sm;
}

.slog_font_red{
    @apply text-red-500;
}

.slog_disable_a{
    @apply pointer-events-none;
}